<template>
    <div class="top">

        <div class="left">
            <el-button @click="shouzhan()" size="mini" icon="el-icon-guide" circle></el-button>
            <span v-if="isLogin">{{ $store.state.user.user.username }}，欢迎使用爱养宠宠物管理系统！</span>
            <span v-else>还没有登录，请 <router-link to="/login">登录</router-link> ,免费<router-link
                    to="/register">注册</router-link></span>
                    <el-button @click="logout">退出</el-button>


        </div>
        <div class="right">
            <div class="icons">
                <i class="el-icon-edit el-icon-iconName"></i>
                <i class="el-icon-edit el-icon-user"></i>
                <i class="el-icon-edit el-icon-iconName"></i>
                <i class="el-icon-edit el-icon-star-off"></i>
                <i class="el-icon-edit el-icon-iconName"></i>
                <i class="el-icon-edit el-icon-iconName"></i>
            </div>
            <div class="userinfo">
                <el-popover placement="right" width="400" trigger="click">
                    <el-descriptions class="margin-top" title="" :column="3" border>
                        <template slot="extra">
                            <el-popover  ref="myPopover" placement="right" width="400" trigger="click">
                                <el-descriptions title="" :column="3" border>
                                    <el-descriptions-item label="修改头像" label-class-name="my-label"
                                        content-class-name="my-content">
                                        <el-upload class="avatar-uploader" action="http://182.92.162.156:8083/users/upattr"
                                            :show-file-list="false" :on-success="handleAvatarSuccess"
                                            :before-upload="beforeAvatarUpload">
                                            <img width="50" v-if="imageUrl" :src="imageUrl" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="用户名">
                                        <el-input placeholder="修改用户名" v-model="changeUsername"></el-input>
                                    </el-descriptions-item>
                                </el-descriptions>
                                <el-button type="primary" @click="Submit">提交</el-button>
                                <el-button type="primary" size="small" slot="reference">编辑个人信息</el-button>
                            </el-popover>
                        </template>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user"></i>
                                用户名
                            </template>
                            {{ $store.state.user.user.username }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-location-outline"></i>
                                头像
                            </template>
                            <div><img slot="reference" width="50" height="50" :src="'http://182.92.162.156:8083/users/downattr?filename=' + $store.state.user.user.attr" alt="">
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                    <img slot="reference" width="50" height="50"
                        :src="'http://182.92.162.156:8083/users/downattr?filename=' + $store.state.user.user.attr" alt="">
                </el-popover>
            </div>
        </div>
    </div>
</template>

<script>
import { User } from "./../api/index"
export default {
    name: 'Top',
    props: {
        msg: String
    },
    data() {
        return {
            isShow: false,
            username:'',
            file: null,
            imageUrl: null,
            changeUsername: '',
            changeAttr: ''
        }
    },
    methods: {
        shouzhan() {
            this.$data.isShow = !this.$data.isShow
            console.log(this.$data.isShow)
            this.$bus.$emit('shouzhan', this.$data.isShow)
        },
        logout(){
            this.username='',
            this.$router.push('/login')
        },
        //选择图片成功时的数据
        handleAvatarSuccess(res, file) {
            // User['downattr']($store.state.user.user.attr)
            console.log(res + '后端返回的图片名字')
            this.$data.changeAttr = res
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || 'image/webp' || 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG,webp,png 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        async Submit() {
            this.$refs.myPopover.doClose();
            if (this.$store.state.user.user.username && this.$data.changeUsername && this.$data.changeAttr) {
                console.log(this.$store.state.user.user.username, this.$data.changeUsername, this.$data.changeAttr, "三个给后端的参数")
                await User['changeUserInfo'](this.$store.state.user.user.username, this.$data.changeUsername, this.$data.changeAttr).then(resu => {
                    console.log(JSON.stringify(resu) + "123后端返回的值")
                    if (resu.code == "200") {
                        let userObj = {
                            attr: this.$data.changeAttr,
                            username: this.$data.changeUsername
                        }
                        this.$store.commit("user/SET_USERNAMEATTR", userObj);
                        this.open1()
                    } else {
                        alert("修改用户信息失败")
                    }

                })
            } else {
                alert("请登录，或者填写修改名字或者头像")
            }

        },
        open1() {
            const h = this.$createElement;
            this.$notify({
                title: '标题名称',
                message: h('i', { style: 'color: teal' }, '修改用户信息成功')
            });
        },
    },
    computed: {
        isLogin() {
            return this.$store.state.user.token;
        },
    }
}
</script>

<style scoped lang="scss">
.top {
    height: 60px;
    background-color: rgb(255, 255, 255);

    display: flex;
    justify-content: space-between;
    padding: 0 50px;
    align-items: center;

    .left {
        .el-button {
            margin-right: 10px;
        }
    }

    .right {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .icons {
            i {
                margin: 0 10px;
                color: rgb(251, 215, 11);
            }
        }

        .userinfo {
            .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }

            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }

            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
            }

            .avatar {
                width: 178px;
                height: 178px;
                display: block;
            }

            img {
                border-radius: 50%;
            }
        }
    }
}
</style>